<template>
  <page-container>
    <div class="app-container">
      <!-- 搜索条件 -->
      <div>
        <a-form
          ref="queryRef"
          :model="queryParam"
          @finish="onHandleSearch">
          <a-row :gutter="32">
            <a-col :span="6">
              <a-form-item name="dbName" label="仓库名称">
                <a-input v-model:value="queryParam.dbName" placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item name="status" label="使用状态">
                <a-select v-model:value="queryParam.status" placeholder="请选择" default-value="99">
                  <a-select-option value="99">全部</a-select-option>
                  <a-select-option value="1">关闭</a-select-option>
                  <a-select-option value="2">运行中</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="state.advanced">
              <a-col :span="6">
                <a-form-item label="调用次数">
                  <a-input-number style="width: 100%"/>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item label="更新日期">
                  <a-date-picker style="width: 100%" placeholder="请输入更新日期"/>
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="!state.advanced">
              <span class="table-page-search-submitButtons" :style="state.advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" html-type="submit"><search-outlined />查询</a-button>
                <a-button style="margin-left: 8px" @click="resetSearch"><redo-outlined />重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ state.advanced ? '收起' : '展开' }}
                  <up-outlined v-if="state.advanced"/>
                  <down-outlined v-else/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- 功能按钮 -->
      <div class="table-operator">
        <a-button type="primary" @click="onShowAdd"><plus-outlined />新建</a-button>
      </div>
      <!-- 表格 -->
      <a-table
        bordered
        :dataSource="state.dataSource" 
        :columns="columns"
        :loading="state.loading" 
        :pagination="pagination"
        :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
        @change="onPageChange"
        :scroll="{ x: 700, y: 500 }"
        size="small"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <a @click="onShowEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a @click="onHandleDelete(record.id)">删除</a>
            </span>
          </template>
        </template>
      </a-table>
      <!-- 弹窗表单 -->
      <a-modal v-model:visible="state.visibleModal" :title="state.titleModal" @ok="onHandleModal" @cancel="onHideModal">
        <a-form :model="modelState">
          <a-form-item label="仓库名称" required>
            <a-input v-model:value="modelState.data.dbName" />
          </a-form-item>
          <a-form-item label="数据库地址" required>
            <a-input v-model:value="modelState.data.dbUrl" />
          </a-form-item>
          <a-form-item label="用户名" required>
            <a-input v-model:value="modelState.data.dbUsername" />
          </a-form-item>
          <a-form-item label="密码" required>
            <a-input v-model:value="modelState.data.dbPasswd" />
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </page-container>
</template>

<script>
import { reactive, onMounted, ref, computed } from "vue";
import { query, edit, add, remove } from "@/api/gen/dbConfig";

const columns = [
  {
    title: "序号",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "仓库名称",
    dataIndex: "dbName",
    key: "dbName"
  },
  {
    title: "数据库地址",
    dataIndex: "dbUrl",
    key: "dbUrl"
  },
  {
    title: "用户名",
    dataIndex: "dbUsername",
    key: "dbUsername"
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action"
  }
];

export default {
  name: "DbConfigList",
  setup() {
    const state = reactive({
      loading: false,
      advanced: false,
      visibleModal: false,
      typeModal: "add",
      titleModal: "添加数据库",
      dataSource: [],
      total: 0,
      current: 1,
      pageSize: 10
    });
    const queryRef = ref();
    const queryParam = reactive({
      dbName: null,
      status: null
    });
    const modelState = reactive({
      data: {
        dbName: null,
        status: null
      }
    });

    onMounted(() => {
      queryList();
    });

    const queryList = () => {
      state.loading = true;
      let params = {
        current: state.current,
        pageSize: state.pageSize
      };
      if (queryParam.dbName) {
        params.dbName = queryParam.dbName;
      }
      if (queryParam.status != 99) {
        params.status = queryParam.status;
      }
      query(params)
        .then(res => {
          const { total, records, current } = res.data;
          console.log(res);
          state.dataSource = records;
          state.total = total;
          state.loading = false;
          state.current = current;
        })
        .catch(error => {
          console.log(error);
        });
    };

    const pagination = computed(() => ({
      current: state.current,
      pageSize: state.pageSize,
      defaultPageSize: state.pageSize,
      pageSizeOptions: ["10", "30", "50"],
      showSizeChanger: true,
      showTotal: total => `共 ${total} 条`,
      total: state.total,
      showQuickJumper: true
    }));

    const onPageChange = e => {
      state.current = e.current;
      state.pageSize = e.pageSize;
      queryList();
    };

    const onShowAdd = () => {
      state.visibleModal = true;
      (state.typeModal = "add"), (state.titleModal = "添加数据库");
    };

    const onShowEdit = record => {
      state.visibleModal = true;
      (state.typeModal = "edit"), (state.titleModal = "编辑数据库");
      modelState.data = record;
    };

    const onHandleModal = () => {
      if (state.typeModal === "add") {
        onHandleAdd();
      } else {
        onHandleEdit();
      }
    };

    const onHideModal = () => {
      modelState.data = {};
      state.typeModal = "add";
    };

    const onHandleAdd = () => {
      add(modelState.data)
        .then(() => {
          state.visibleModal = false;
          queryList();
        })
        .catch(error => {
          console.log(error);
        });
    };

    const onHandleDelete = id => {
      remove(id)
        .then(() => {
          queryList();
        })
        .catch(error => {
          console.log(error);
        });
    };

    const onHandleEdit = () => {
      edit(modelState.data)
        .then(() => {
          state.visibleModal = false;
          queryList();
        })
        .catch(error => {
          console.log(error);
        });
    };

    const toggleAdvanced = () => {
      state.advanced = !state.advanced;
    };

    const onHandleSearch = () => {
      queryList();
    };

    const resetSearch = () => {
      queryRef.value.resetFields();
      queryList();
    };

    return {
      state,
      queryRef,
      queryParam,
      modelState,
      columns,
      pagination,
      queryList,
      onPageChange,
      onShowAdd,
      onShowEdit,
      onHandleModal,
      onHideModal,
      onHandleAdd,
      onHandleDelete,
      onHandleEdit,
      toggleAdvanced,
      onHandleSearch,
      resetSearch
    };
  }
};
</script>

<style>
.app-container {
  height: 700px;
  padding: 20px;
  background: #ffffff;
}
.table-operator {
  float: right;
  margin-bottom: 18px;
  margin-top: 18px;
}
</style>
